import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import styles from './styles.less';

export default class CarouselMaskLayer extends PureComponent {
    static defaultProps = {
        children: true,
        dotsHidden: false,
        back: '',
        stream: false, // 是否流奖
    };

    static propTypes = {
        children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
        dotsHidden: PropTypes.bool,
        back: PropTypes.string,
        stream: PropTypes.bool,
    };

    render() {
        const {
            children, dotsHidden, back, stream
        } = this.props;
        const dotsHiddenClass = dotsHidden ? styles.dotsHidden : '';
        const backClass = back ? styles.back : '';
        return (
            <div
                className={cx(styles.maskLayer, dotsHiddenClass, backClass)}
                style={stream
                    ? {
                        backgroundImage:
                            'url(https://cdn.weipaitang.com/static/20190709b5da819e-db16-4d76-9ace-e003bc95dd08-W1125H135)',
                    } : {}}
            >
                {children}
            </div>
        );
    }
}
